<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane
      v-for="item in tabOptions"
      :key="item.name"
      :label="item.label"
      :name="item.name"
      style="height:500px;width:260px;overflow: auto;"
    >
      <el-tree
        @check="checkTreeNode(item.name, $event)"
        :check-on-click-node="true"
        :data="item.data"
        :expand-on-click-node="false"
        :props="item.props"
        ref="tree"
        v-if="item.label!=='按角色设置'"
      ></el-tree>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  name: "TabTree",
  props: {
    tabOptions: {
      type: Array,
    },
    checkTreeNode: {
      type: Function,
      default: function(name, event) {
        console.log(name, event);
      },
    },
    handleClick: {
      type: Function,
      default: function(tab) {
        console.log(tab);
      },
    },
    treeData: {
      type: Boolean,
      default: true,
    },
  },
  computed: {
    activeName() {
      return this.tabOptions[0].name;
    },
  },
  mounted() {
    // console.log(this.tabOptions);
  },
};
</script>
<style lang="scss" scoped></style>
